import { history } from 'umi';
import bgImage from '@/assets/p2/background.png'; //背景图片
import '@/pages/p2/gamepage.css'
import Dialog from "@/components/Dialog"; //对话组件
import dialogImage from "@/assets/p1/dialog_background_red.png";
import TreasureBox from "@/components/TreasureBox"; //百宝袋组件
import AchievementList from "@/components/AchievementList"; //成就组件
import people1 from '@/assets/p2/people1.png';
import people2 from '@/assets/p2/people2.png';

import { useState, useEffect } from "react";
import Character from "@/components/Character"; //角色组件
import characterImage from "@/assets/p1/characters/protagonist.png";
import front1 from "@/assets/p1/front1.png";
import front2 from "@/assets/p1/front2.png";
import front3 from "@/assets/p1/front3.png";
import back1 from "@/assets/p1/back1.PNG";
import back2 from "@/assets/p1/back2.PNG";
import back3 from "@/assets/p1/back3.PNG";
import left1 from "@/assets/p1/left1.png";
import left2 from "@/assets/p1/left2.png";
import left3 from "@/assets/p1/left3.png";
import right1 from "@/assets/p1/right1.png";
import right2 from "@/assets/p1/right2.png";
import right3 from "@/assets/p1/right3.png";

const sumi = () => {
    
    const dialogues = ["小兄弟，能帮我想想办法称出粟米的重量吗？", "没问题，让我看看自己有哪些工具（打开天平）"];
	const [dia, setDia] = useState(false);
    const chengjiu = () => {

    }
    const tiaozhuan = () => {
        history.push('/p2/tianping');
    }


    const screenWidth = window.innerWidth;
	const screenHeight = window.innerHeight;
    const [renX, setRenX] = useState(0.5 * screenWidth);
	const [renY, setRenY] = useState(0.75 * screenHeight);
    const [characterPosition, setCharacterPosition] = useState({
		x: renX,
		y: renY,
	});
	const characterImages = {
		front: [front1, front2, front3, front2],
		left: [left1, left2, left3, left2],
		right: [right1, right2, right3, right2],
		back: [back1, back2, back3, back2]
	};
	const handlePositionChange = newPosition => {
		setCharacterPosition(newPosition);
	};
	useEffect(() => {
		const { x, y } = characterPosition;
		if (
			x > 0.24 * screenWidth &&
			y > 0.4 * screenHeight &&
			y < 0.5 * screenHeight &&
			x < 0.36 * screenWidth
        ){
			setDia(true);
        }
	});


    return(
        <div className='game-page' style={{ backgroundImage: `url(${bgImage})` }}>
            <TreasureBox itemId={4} onItemClick={tiaozhuan}/>
            <AchievementList achievementId={5} handleClick={chengjiu}/>
            {dia &&
			(<Dialog backgroundImage={dialogImage} dialogues={dialogues} 
                    dialogueImages={[{rightImage:people2}, {leftImage:people1}]}>
            </Dialog>)}
            <Character
				characterImage={characterImage}
				characterImages={characterImages}
				canMove={true}
				initPositionX={renX}
				initPositionY={renY}
				onPositionChange={handlePositionChange}
				ifProtagonist="true"
			/>
        </div>
    );
}

export default sumi;